@import '../../../themes/basic/base-all.less';

:host {
  --ti-tree-node-icon-size: var(--ti-common-size-4x);
  --ti-tree-item-height: 30px; // 节点的高度
  --ti-tree-square-icon-size: var(--ti-common-size-4x); // 展开收起图标大小
  --ti-tree-icon-right-space: var(--ti-common-space-2x); // 展开收起图标、复选框右侧间距
  --ti-tree-node-icon-space: calc(
    var(--ti-tree-square-icon-size) + var(--ti-tree-node-icon-size) + var(--ti-common-space-base) * 2 + var(--ti-tree-icon-right-space) * 2
  ); // 展开收起图标大小 + 复选图标大小 + 展开收起图标右侧间距 + 文本内容距离右侧间距 + 复选图标右侧间距
  --ti-tree-node-text-nomultiple-space: calc(
    var(--ti-tree-square-icon-size) + var(--ti-tree-icon-right-space) * 2
  ); // 用于计算文本区域宽度:没有多选的场景
  --ti-tree-node-text-multiple-leaf-space: calc(
    var(--ti-tree-node-icon-size) + var(--ti-common-space-base) + var(--ti-tree-icon-right-space) * 2
  ); // 用于计算文本区域宽度:多选且为叶子节点的场景,复选图标大小 + 复选图标左侧间距 + 复选图标右侧距离文本内容间距 * 文本内容距离右侧间距
  --ti-tree-node-text-padding-space: calc(
    var(--ti-common-space-2x) + var(--ti-common-space-base)
  ); // 用于计算文本区域宽度: 没有多选且为叶子节点场景，文本区域的左右padding值
  --ti-tree-item-guide-line-first-child-space: var(--ti-common-space-2x);
  --ti-tree-item-guide-line-width: var(--ti-common-size-2x); // 导航线宽度
  --ti-tree-small-checkbox-size: var(--ti-common-size-3x);
  --ti-tree-small-icon-font-size: var(--ti-common-size-3x);
  --ti-tree-small-icon-space: calc(var(--ti-common-space-base) / 2);
  --ti-tree-drag-border-color-default: var(
    --ti-common-color-line-active
  ); // 拖动放置时显示的边框颜色，单独提出避免与checkbox的边框颜色互相影响
  --ti-tree-square-bg-color-active: var(
    --ti-common-color-bg-white-normal
  ); // 展开收起图标背景激活色，单独提出避免与checkbox的背景色互相影响
}
:host.ti3-tree-virtual-scroll {
  display: block;
  cdk-virtual-scroll-viewport {
    height: 100%;
  }
}
:host ::ng-deep .cdk-virtual-scroll-content-wrapper {
  width: 100%;
}

.ti3-tree-node-text {
  max-width: 100%;
  display: inline-block;
  .ellipsis();
}

.ti3-tree-parent-node {
  font-size: var(--ti-common-font-size-base);
  position: relative;
}

.ti3-tree-node-icon {
  text-align: center;
  font-size: var(--ti-tree-node-icon-size);
  margin-right: var(--ti-tree-icon-right-space);
}

.ti3-tree-leaf-node {
  margin-left: var(--ti-common-space-6x);
  position: relative;
}

.ti3-tree-node-text-wrapper {
  display: flex;
  align-items: center;
  width: ~'calc(100% - var(--ti-tree-node-icon-space))';
  white-space: nowrap;
  padding: var(--ti-common-space-0) var(--ti-common-space-2x) var(--ti-common-space-0) var(--ti-common-space-base);
  &:hover {
    background: var(--ti-common-color-bg-white-emphasize);
    &.ti3-tree-text-disabled-wrapper {
      background: none;
    }
  }
  &:focus {
    outline: none;
  }
  &.ti3-tree-text-focus {
    background: var(--ti-common-color-bg-white-emphasize);
    outline: none;
  }
  .ti3-tree-operate {
    font-size: var(--ti-common-font-size-2);
    color: var(--ti-common-color-icon-normal);
    margin-left: var(--ti-common-space-2x);
    &:hover,
    &:active {
      color: var(--ti-common-color-icon-hover);
      cursor: pointer;
    }
    &:first-of-type {
      margin-left: var(--ti-common-space-3x);
    }
  }
  .ti3-tree-edit-input {
    height: var(--ti-tree-item-height);
  }
}
.ti3-tree-text-nomultiple-wrapper {
  width: ~'calc(100% - var(--ti-tree-node-text-nomultiple-space))';
}

.ti3-tree-text-multiple-leaf-wrapper {
  width: ~'calc(100% - var(--ti-tree-node-text-multiple-leaf-space))';
}

.ti3-tree-text-leaf-wrapper {
  width: ~'calc(100% - var(--ti-tree-node-text-padding-space))';
}

.ti3-tree-content-box {
  display: flex;
  align-items: center;
  cursor: pointer;
  height: var(--ti-tree-item-height);
  line-height: var(--ti-tree-item-height);
  padding-left: var(--ti-common-space-2x);
}

.ti3-tree-content-box-disabled {
  color: var(--ti-common-color-text-disabled);
  cursor: not-allowed;
}

.ti3-tree-item-active {
  background: var(--ti-common-color-bg-light-normal);
  &:hover,
  &:focus {
    background: var(--ti-common-color-bg-light-normal);
  }
}

.ti3-tree-item-leaf {
  margin-left: calc(var(--ti-tree-square-icon-size) + var(--ti-common-space-base));
}

.ti3-tree-checkbox-wrapper {
  display: inline-block;
  font-size: 0; // 解决图标溢出问题
}

:host {
  .ti3-tree-content-box .ti3-tree-checkbox-wrapper {
    ::ng-deep input[type='checkbox'][tiCheckbox] {
      & + .ti3-checkbox {
        .ti3-checkbox-skin {
          margin: 0 var(--ti-common-space-base) 0 var(--ti-common-space-base); // 规范调整，复选框距离左右侧间距4px
        }
      }
    }
  }
}

.ti3-tree-item-loading {
  padding: 0 2px 0 2px;
  margin-right: var(--ti-common-space-base);
}

.ti3-tree-container {
  .ti3-icon-minus-square {
    color: var(--ti-common-color-icon-active);
  }

  .ti3-icon-plus-square {
    color: var(--ti-common-color-icon-normal);
  }

  .ti3-icon-minus-square,
  .ti3-icon-plus-square {
    margin-right: var(--ti-common-space-base);
    font-size: var(--ti-tree-square-icon-size);
    // i标签元素如果不设置具体宽度，在浏览器缩放小于100%的时候，宽度会变大，导致后面的文本区域换行。
    display: inline-block;
    width: var(--ti-tree-square-icon-size);
    // 由于line-height继承性，图标按下时，整个图标节点背景色会变化
    line-height: var(--ti-tree-square-icon-size);

    &:hover {
      cursor: pointer;
      color: var(--ti-common-color-icon-active);
    }

    &:active {
      color: var(--ti-common-color-icon-active);
      background: var(--ti-tree-square-bg-color-active);
    }
  }
}

.ti3-tree-content-drag-box {
  height: var(--ti-tree-item-height);
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
  box-sizing: border-box;
}

.ti3-tree-drag-over-inner {
  border: var(--ti-common-border-weight-1) var(--ti-common-border-style-solid) var(--ti-tree-drag-border-color-default);
  padding: 0 var(--ti-common-space-6) 0 2px;
}

.ti3-tree-drag-over-top {
  border-top: var(--ti-common-border-weight-1) var(--ti-common-border-style-solid) var(--ti-tree-drag-border-color-default);
}

.ti3-tree-drag-over-bottom {
  border-bottom: var(--ti-common-border-weight-1) var(--ti-common-border-style-solid) var(--ti-tree-drag-border-color-default);
}
/* -----------------------------------------------左侧导航线样式--------------------------------------------*/
.ti3-tree-leaf-node {
  // 导航线基础样式
  & > .ti3-tree-content-box > .ti3-tree-item-guide-line {
    position: absolute;
    width: var(--ti-tree-item-guide-line-width);
    height: var(--ti-tree-item-height);
    .box-sizing(border-box);
    border-left: 1px solid var(--ti-common-color-line-dividing);
    border-bottom: 1px solid var(--ti-common-color-line-dividing);
    top: calc(-1 * var(--ti-tree-item-height) / 2);
    left: calc(-1 * var(--ti-tree-square-icon-size) / 2);
  }

  // 第一个子节点的导航线样式：正常场景和虚拟滚动场景
  &:not(.ti3-tree-virtual-scroll-node):first-child,
  &.ti3-tree-virtual-scroll-first-child-node {
    & > .ti3-tree-content-box > .ti3-tree-item-guide-line {
      height: calc(
        var(--ti-tree-item-height) - var(--ti-tree-square-icon-size) / 2 - var(--ti-tree-item-guide-line-first-child-space)
      ); // 第一个节点的导航线与图标的间距为8px
      top: calc(var(--ti-tree-square-icon-size) / 2 + var(--ti-tree-item-guide-line-first-child-space) - var(--ti-tree-item-height) / 2);
    }
  }

  &:not(.ti3-tree-virtual-scroll-node):not(:last-child) > .ti3-tree-parent-node:after {
    content: '';
    position: absolute;
    height: 100%;
    .box-sizing(border-box);
    width: var(--ti-tree-item-guide-line-width);
    border-left: 1px solid var(--ti-common-color-line-dividing);
    left: calc(-1 * var(--ti-tree-square-icon-size) / 2);
    top: calc(-1 * var(--ti-tree-item-height) / 2);
  }

  &.ti3-tree-virtual-scroll-node {
    > .ti3-tree-content-box > .ti3-tree-item-guide-line {
      border-left: 0px;
    }
    > .ti3-tree-content-box > .ti3-tree-item-vertical-guide-line {
      position: absolute;
      height: 100%;
      top: 0px;
      width: 1px;
      background-color: var(--ti-common-color-line-dividing);
      &.ti3-tree-last-item-vertical-guide-line {
        height: 50%;
      }
    }
  }
}

/* -----------------------------------------------紧凑型(运维场景)--------------------------------------------*/
:host[small] {
  .ti3-icon-minus-square,
  .ti3-icon-plus-square {
    margin-right: var(--ti-tree-small-icon-space);
    font-size: var(--ti-tree-small-icon-font-size);
    width: var(--ti-tree-small-icon-font-size);
    line-height: var(--ti-tree-small-icon-font-size);
  }

  .ti3-tree-node-icon {
    font-size: var(--ti-tree-small-icon-font-size);
    margin-right: var(--ti-common-space-base);
  }

  .ti3-tree-content-box .ti3-tree-checkbox-wrapper {
    ::ng-deep input[type='checkbox'][tiCheckbox] {
      & + .ti3-checkbox {
        .ti3-checkbox-skin {
          margin: 0 var(--ti-tree-small-icon-space) 0 var(--ti-tree-small-icon-space);
          width: var(--ti-tree-small-checkbox-size);
          height: var(--ti-tree-small-checkbox-size);
          line-height: var(--ti-tree-small-checkbox-size);
        }
      }

      &:indeterminate + .ti3-checkbox {
        .ti3-checkbox-skin:before {
          top: calc((var(--ti-tree-small-checkbox-size) - 8px) / 2);
          left: calc((var(--ti-tree-small-checkbox-size) - 8px) / 2);
        }
      }

      &:checked + .ti3-checkbox {
        .ti3-checkbox-skin:before {
          width: calc(var(--ti-tree-small-checkbox-size) / 12 * 5);
          height: calc(var(--ti-tree-small-checkbox-size) / 12 * 7);
        }
      }
    }
  }

  .ti3-tree-item-leaf {
    margin-left: calc(var(--ti-tree-small-icon-font-size) + var(--ti-tree-small-icon-space));
  }

  .ti3-tree-content-box {
    padding-left: var(--ti-common-space-base);
  }

  .ti3-tree-leaf-node {
    margin-left: calc(var(--ti-common-space-base) + var(--ti-tree-small-icon-font-size));

    .ti3-tree-content-box {
      padding-left: var(--ti-common-space-base);
    }

    & > .ti3-tree-content-box > .ti3-tree-item-guide-line {
      width: calc(var(--ti-tree-small-icon-font-size) / 2);
      left: calc(-1 * var(--ti-tree-small-icon-font-size) / 2);
    }

    &:not(.ti3-tree-virtual-scroll-node):not(:last-child) > .ti3-tree-parent-node:after {
      left: calc(-1 * var(--ti-tree-small-icon-font-size) / 2);
    }
  }

  .ti3-tree-node-text-wrapper {
    padding-left: var(--ti-tree-small-icon-space);
  }
}

// 搜索高亮色
::ng-deep .ti3-font-highlight {
  color: var(--ti-common-color-text-highlight);
}

.ti3-tree-more-content {
  display: inline-block;
}

.ti3-tree-more-box {
  margin-left: 0px;
  padding: 0px;
}

.ti3-tree-more-loading {
  margin: 0 var(--ti-common-space-6) 0 var(--ti-common-space-10);
}

.ti3-tree-node-more-text {
  margin-left: var(--ti-common-space-base);
  color: var(--ti-common-color-prompt-text);
}

.ti3-tree-more-error {
  padding-left: var(--ti-common-space-3x);
}
